<template>
  <div ref="tree" class="rf-edit-tree" :style="{'height': treeHeight + 'px'}">
    <el-tree ref="tree" :default-expanded-keys="defaultKeys" node-key="id" :expand-on-click-node="true" :data="data"
      :props="defaultProps" :highlight-current="true" @node-click="nodeClick">
      <div slot-scope="{ node, data }" class="custom-tree-node" @mouseleave="closeMenu">
        <span>{{ node.label }}</span>
        <i v-show="currentNode.data && currentNode.data.id === data.id && showEdit" class="el-icon-more tree-icon"
          @click.stop="setTreeMenu(data, node)" />
      </div>
    </el-tree>
    <div v-show="treeMenuShow" class="tree-menu" :style="{'top': menuTop + 'px'}" @mouseenter="showTreeMenu"
      @mouseleave="closeMenu">
      <ul>
        <li v-has="menuPermission[0] || 'btn_add_category'" class="tree-menu-item" @click.stop="addChild">{{menuTitle[0] || '添加子组织'}}</li>
        <li v-has="menuPermission[1] || 'btn_edit_category'" class="tree-menu-item" @click.stop="editNode">{{menuTitle[1] || '修改名称' }}</li>
        <li v-has="menuPermission[2] || 'btn_delete_category'" class="tree-menu-item" @click.stop="deleteNode">{{menuTitle[2] || '删除'}}</li>
      </ul>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'YhEditTree',
    props: {
      data: {
        type: Array,
        default: () => []
      },
      defaultProps: {
        type: Object,
        default: () => {}
      },
      defaultKeys: {
        type: Array,
        default: () => []
      },
      menuTitle: {
        type: Array,
        default: () => []
      },
      menuPermission: {
        type: Array,
        default: () => []
      },
      showEdit: {
        type: Boolean,
        default: true
      }
    },
    data () {
      return {
        currentNode: {},
        treeMenuShow: false,
        menuTop: 0,
        currentEl: '',
        treeHeight: 0
      }
    },
    mounted () {
      this.$nextTick(() => {
        this.initTreeHeight()
      })
    },
    methods: {
      initTreeHeight () {
        const bodyHeight = document.body.offsetHeight
        const tree = this.$refs.tree
        const top = tree.getBoundingClientRect().top
        this.treeHeight = bodyHeight - top - 30
      },
      addChild () {
        const node = this.currentNode
        this.$emit('addChild', node.data, node)
      },
      editNode() {
        const node = this.currentNode
        this.$emit('editNode', node.data, node)
      },
      deleteNode() {
        const node = this.currentNode
        this.$emit('deleteNode', node.data, node)
      },
      nodeClick(data, node, component) {
        this.currentEl = component.$el
        this.currentNode = node
        this.$emit('nodeClick', node.data, node, component)
      },
      showTreeMenu() {
        this.treeMenuShow = true
      },
      setTreeMenu(data, node) {
        this.treeMenuShow = true
        this.currentNode = node
        this.menuTop = this.currentEl.offsetTop + 26
      },
      closeMenu() {
        this.treeMenuShow = false
      }
    }
  }
</script>
<style lang="scss" scoped>
  .rf-edit-tree {
    position: relative;

    .custom-tree-node {
      position: relative;
      height: 100%;
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 14px;
      padding-right: 6px;
    }

    .tree-menu {
      position: absolute;
      right: 2px;
      background: #fff;
      z-index: 1;
      box-shadow: 0 0 2px #ccc;
      padding: 20px;

      .tree-menu-item {
        cursor: pointer;
        margin-bottom: 15px;

        &:last-child {
          margin-bottom: 0px;
        }
      }
    }

    .tree-icon {
      position: relative;
      display: inline-block;
      width: 18px;
      height: 100%;
      font-size: 16px;

      &::before {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
      }
    }
  }
</style>
